<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <!--当前示例页面样式表引用-->
    <link rel="stylesheet" href="./static/demo/openlayers/example/style.css" />
    <script include="jquery" src="./static/libs/include-lib-local.js"></script>
    <script src="./static/libs/include-openlayers-local.js"></script>
    <style type="text/css">
        #mapCon {
            width: 100%;
            height: 95%;
            position: absolute;
        }
        .ol-mouse-position {
            top: 95%;
            right: 8px;
            position: absolute;
        }
    </style>

    <script type="text/javascript">
        var tdk = "4c27d6e0e8a90715b23a989d42272fd8";   //天地图密钥
        var mousePositionControl = null;
        var map = null;
        var TiandiMap_vect = null;
        function init() {
            //加载天地图影像图层
            var TiandiMap_img = new ol.layer.Tile({
                name: "天地图影像图层",
                source: new ol.source.XYZ({
                    url: "http://t0.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=" + tdk,
                    wrapX: false,
                    crossOrigin: "Anonymous"
                })
            });
            //加载天地图瓦片图层数据
            TiandiMap_vect = new ol.layer.Tile({
                    title: "天地图矢量图层",
                    source: new ol.source.XYZ({
                        url: "http://t0.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=" + tdk,
                        wrapX: false,
                        crossOrigin: "Anonymous"
                    })
            });
            
            var TiandiMap_vectcia =new ol.layer.Tile({
                    title: "天地图矢量注记图层",
                    source: new ol.source.XYZ({
                        url: "http://t0.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=" + tdk,
                        crossOrigin: "Anonymous"
                    })
            });
            //初始化地图容器
            map = new ol.Map({
                target: 'mapCon',     //地图容器div的ID
                controls: ol.control.defaults({
                    attributionOptions: ({
                        collapsible: true
                    })
                }),
                view: new ol.View({
                    center: ol.proj.fromLonLat([-109, 46.5]),
                    zoom: 6
                }),
                layers:[TiandiMap_img,TiandiMap_vect,TiandiMap_vectcia]
            });
            
            mousePositionControl = new ol.control.MousePosition({
                coordinateFormat: ol.coordinate.createStringXY(4),
                // projection: 'EPSG:3857'
            });
            map.addControl(mousePositionControl);
            
            // 实时得到鼠标的像素位置
            var mousePosition = null;
             //探查半径
            var radius = 75;

            document.getElementById("mapCon").addEventListener('mousemove', function (event) {
                mousePosition = map.getEventPixel(event);
                map.render();
            });

            document.getElementById("mapCon").addEventListener('mouseout', function () {
                mousePosition = null;
                map.render();
            });

            // 在渲染层之前,做剪裁
            TiandiMap_vect.on('precompose', function (event) {
                var ctx = event.context;
                var pixelRatio = event.frameState.pixelRatio;
                ctx.save();
                ctx.beginPath();
                if (mousePosition) {
                    //只显示一个围绕着鼠标的圆圈
                    ctx.arc(mousePosition[0] * pixelRatio, mousePosition[1] * pixelRatio, radius * pixelRatio, 0, 2 * Math.PI);
                    ctx.lineWidth = 5 * pixelRatio;
                    ctx.strokeStyle = 'rgba(0,0,0,0.5)';
                    ctx.stroke();
                }
                ctx.clip();
            });

            // 呈现层后,恢复画布的背景
            TiandiMap_vect.on('postcompose', function (event) {
                var ctx = event.context;
                ctx.restore();
            });
        }

     

    </script>
</head>

<body onload="init()">
    <div id="mapCon">
    </div>
</body>

</html>